<script lang="ts" setup>
const props = defineProps({
  courses: Array<any>,
});
</script>

<template>
  <view class="course-nav-wrapper">
    <view class="course-nav-info"
      v-for="(item, index) in props.courses"
      :key="index">
      <text class="course-nav-icon icon iconfont" :class="item.icon"></text>
      <view class="course-info-text">{{ item.text }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "@/common/font/iconfont.css";

.course-nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  .course-nav-info {
    box-sizing: border-box;
    width: 20%;
    text-align: center;
    margin: 10px 0;

    .course-nav-icon {
      font-size: 30px;
    }
    .course-info-text {
      font-size: 13px;
      margin-top: 5px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .icon-java {
      color: #2a83fe;
    }

    .icon-icon-- {
      color: #fd391f;
    }

    .icon-houduan {
      color: #2b9be2
    }

    .icon-zidonghua {
      color: #fea917;
    }
    .icon-shujufenxi {
      color: #00b478;
    }

  }
}
</style>
